//该组件用于管理项目的所有route
import VueRouter from 'vue-router';
import About from '../pages/About';
import Home from '../pages/Home';
import News from '../pages/News';
import Message from '../pages/Message';
import Detial from '../pages/Detial';
import Flow from '../pages/Flow';

const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component: About
        },
        {
            path:'/home',
            component: Home,
            children:[
                {
                    path:'news',
                    component: News,
                    children:[
                        {
                            name:'pathveriable',
                            path:'flow/:newsId/:newsName', //注意这里要使用占位符接收params参数，否则路由匹配失败
                            component: Flow,
                            //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detial组件,值为固定值，使用情况极少
                            //props:{a: 1, b: 'hello'}
                             //props的第二种写法，值为布尔，会将params参数以props的形式传给Detial组件
                             //props:true
                             //props的第三种写法，值为函数，该函数返回的对象中的所有key-value都会以props的形式传给Detial组件
                            props($route){
                                return {
                                    newsId: $route.params.newsId,
                                    newsName: $route.params.newsName
                                }

                            },
                            //独享守卫
                            // beforeEnter(to,from,next){
                            //     console.log('beforeEnter',to,from)
                            //     if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
                            //         if(localStorage.getItem('school') === 'atguigu'){
                            //             next()
                            //         }else{
                            //             alert('暂无权限查看')
                            //             // next({name:'guanyu'})
                            //         }
                            //     }else{
                            //         next()
                            //     }
                            // }
                        }
                    ],
                    meta:{
                        isAuth: true,  //自定义的属性，用于标识该路由是否需要鉴权
                        title: '新闻'  //自定义的属性，用于标识该路由的页签标题
                    }
                },
                {
                    path:'message',
                    component: Message,
                    children:[
                        {
                            path:'detial',
                            component: Detial, 
                            //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detial组件,值为固定值，使用情况极少
                            //props:{a: 1, b: 'hello'}
                            //props的第三种写法，值为函数，该函数返回的对象中的所有key-value都会以props的形式传给Detial组件
                            props($route){
                                return {
                                    messageId: $route.query.messageId,
                                    messageName: $route.query.messageName
                                }

                            }
                        }
                    ],
                    meta:{
                        isAuth: true,  //自定义的属性，用于标识该路由是否需要鉴权
                        title: '消息'  //自定义的属性，用于标识该路由的页签标题
                    }
                }
            ]
        }
    ]
})
//配置全局路由前置守卫，触发的时机为初始化完成，或者发生路由切换之前被调用
router.beforeEach((to, from, next) => {
    console.log('beforeEach', to, from); //to 代表即将要离开路由对象，from代表即将要到达的路由对象
    if(to.meta.isAuth){
        if(sessionStorage.getItem('username') === 'atguigu'){
            next(); //路由放行 
        }else{
            alert('该用户无权限查看该页面');
        }
    }else{
        next(); //路由放行
    }
  
})
//全局路由后置守卫，触发的时机为初始化完成，或者发生路由切换之后被调用
router.afterEach((to, from) => {
    //console.log('afterEach', to, from); //to 代表即将要离开路由对象，from代表即将要到达的路由对象
    document.title = to.meta.title || '硅谷系统'; //动态修改页面标题
})

export default router;